<template>
  <view>
    <view class="section" @click="changeShow">
      <view class="section-title">{{title}}</view>
      <view v-if="isOpen" class="arrow">
        <uni-icons type="top" size="20" color="#fff"></uni-icons>
      </view>
      <view v-if="!isOpen" class="arrow">
        <uni-icons type="bottom" size="20" color="#fff"></uni-icons>
      </view>
    </view>
    <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="isOpen">
      <slot></slot>
    </uni-transition>
  </view>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: ""
      },
      show: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      show() {
        this.isOpen = this.show;
      }
    },
    data() {
      return {
        isOpen: this.show,
        baziResult: this.result,
        modeClass: 'fade',
        styles: {}
      }
    },
    methods: {
      changeShow() {
        this.isOpen = !this.isOpen;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .section {
    width: 100%;
    height: 72rpx;
    color: white;
    background: #4b240d;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10rpx 46rpx;

    .section-title {
      font-size: 36rpx;
      padding-right: 22rpx;
    }

    .arrow {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
</style>